import React from 'react';
import { AntdBaseTable } from './TBaseTable';
import { useTablePipeline } from 'ali-react-table';
import { imgString_1 } from '../../helper';
import styles from './index.less';
import { CheckCircleOutlined, FormOutlined, ClockCircleOutlined } from '#/utils/antdIcons.js';
import _ from 'lodash';

const BaseTable = (props: any) => {
  const { tableData, tableHeader = [] } = props;
  // 处理表头
  const getColumns = (columsValue: any) => {
    const columns: any[] = [];
    columsValue.forEach((item: any, index: number) => {
      columns.push({
        name: item.name,
        align: 'center',
        code: item.field,
        width: item.width,
        lock: index == 1 || index === columsValue.length - 1,
        render: (value: any) => {
          if (item.field === 'planStatus') {
            return (
              <span key={index}>
                {value === '已完成' ? (
                  <CheckCircleOutlined style={{ marginRight: 4, color: '#30D485' }} />
                ) : value === '待制定' ? (
                  <FormOutlined style={{ marginRight: 4, color: '#FFD60A' }} />
                ) : value === '待发布' ? (
                  <ClockCircleOutlined style={{ marginRight: 4, color: '#FA752B' }} />
                ) : (
                  <img style={{ marginRight: 4 }} src={imgString_1} />
                )}
                {value}
              </span>
            );
          }
          if (item.field === 'operation') {
            return value();
          }
          if (!value && value !== 0) {
            return '-';
          }
          return value;
        },
      });
    });
    return columns;
  };
  const dataTable = _.cloneDeep(tableData);
  const pipeline = useTablePipeline({ components: {} }).input({
    dataSource: dataTable,
    columns: getColumns(tableHeader),
  });

  return (
    <div className={styles.outside} style={{ maxHeight: 'calc(100vh - 200px)' }}>
      <AntdBaseTable
        className={['bordered', `${styles.custor}`].join(' ')}
        style={{
          // '--header-bgcolor': '#383C3E',
          // '--header-color': 'white',
          '--row-height': '21px',
          '--header-row-height': '29px',
          '--bgcolor': 'var(--bg-main)',
          '--color': '#D3D4D4',
          '--cell-padding': '3px 0 4px 0',
          '--hover-bgcolor': 'var(--bg-main)',
        }}
        {...pipeline.getProps()}
        defaultColumnWidth={81}
        useVirtual={{ horizontal: true, vertical: true, header: false }}
      />
    </div>
  );
};

export default BaseTable;
